<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <%@include file="/front-end/views/common/head.jsp"%>
    <title>个人空间</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        /*#top{*/
        /*    float:left;*/
        /*    width: 100%;*/
        /*    height: 80px;*/
        /*    background-color:#155837;*/
        /*}*/
        /*#top p{*/
        /*    float:left;*/
        /*    margin-left:20px;*/
        /*    margin-top:10px;*/
        /*    color:white;*/
        /*    font-size: 30px;*/
        /*}*/
        /*#top img{*/
        /*    margin-left:20px;*/
        /*    margin-top:10px;*/
        /*    float:left;*/
        /*    width: 90px;*/
        /*    height: 90px;*/
        /*    border-radius: 50%;*/
        /*}*/
        #main{
            float:left;
            background-color: #f6f6f6;
            width: 100%;
            /* height:580px; */
        }
        #left{
            margin-top: 15px;
            margin-left: 15px;
            float:left;
            width:20%;
            height:200px;
            /*border: 5px solid white;*/
            /*border-radius: 25px;*/
            /*background-color:#f6f4f0;*/
        }
        #left ul{
			padding:45px;
		}

		#left ul li{
			list-style: none;
            /* color:#155837; */
			padding:10px;
			font-size: 20px;
			transition:all 0.3s;
            text-align: center;
            cursor: pointer;
		}
        #left img{
            width:250px;
            height:300px;
            margin-top: -80px;
        }
       #right{
            margin-top: 15px;
            margin-left: 15px;
            float:left;
            width: 76%;
            height:500px;
           /* background-color: pink; */
       }

       /* one */
       #right ul{
           padding-left: 40px;
       }
       #right ul li {
           float:left;
           list-style: none;
           /* margin-left: 20px; */
           font-size: 25px;
           color:#155837;
           margin-top: 20px;
           margin-left: 10px;
           cursor: pointer;
       }
       #right .itemone{
            width:1000px;
            height:430px;
            margin-top: 80px;
            margin-left:30px;
            /* background-color: red; */
       }


       .current{
            background-color: grey;
            /*border-radius: 10px;*/
            /*transform: scale(1.2);*/
            color:#fff;
       }
       /*.currentt{*/
       /*    color:#155837;*/
       /*    font-size: 30px;*/
       /*    font-weight: 900;*/
       /*    border-bottom:2px solid #96b97d;*/
       /*}*/
       .item {
            display:none;
            margin: 0px;
            width: 100%;
            height:400px;
            font-weight: 200;
            /*border: 5px solid white;*/
            /*border-radius: 25px;*/
            margin-bottom: 20px;
            background-color:#f6f4f0;
        }
        .itemone,
        .itemtwo,
        .itemthree{
            margin-top:100px;
            margin-left: 50px;
            width:1000px;
            height:400px;
            /* background-color: purple; */
        }
        /*#student,*/
        /*#teacher,*/
        /*#counselor*/
		/*{*/
		/*	margin-top: 40px;*/
		/*	width:1100px;*/
		/*	!* height:250px; *!*/
		/*	border-collapse:collapse;*/
		/*}*/
		/*#student td, #student th,*/
        /*#teacher td, #teacher th,*/
        /*#counselor td, #counselor th*/
		/*{*/
		/*	font-size:20px;*/
		/*	border:1px solid #d4d4d4;*/
		/*	padding:3px 7px 2px 7px;*/
		/*}*/
		/*#student th,#teacher th,#counselor th*/
		/*{*/
		/*	height:20px;*/
		/*	font-size:15px;*/
		/*	text-align:left;*/
		/*	padding-top:5px;*/
		/*	padding-bottom:4px;*/
		/*	background-color:#555;*/
		/*	color:white;*/
		/*}*/
        /*#student td,#teacher td,#counselor td{*/
        /*    font-size: 15px;*/
        /*}*/
		/*#student .alt td,*/
        /*#teacher .alt td,*/
        /*#counselor .alt td*/
		/*{*/
		/*	background-color:white;*/
		/*}*/
        /*#pone{*/
        /*    margin-top: 120px;*/
        /*    margin-left: 80px;*/
        /*    !* background-color: pink; *!*/
        /*    width:400px;*/
        /*    !* height:100px; *!*/
        /*}*/
        /*#pone p{*/
        /*    display:block;*/
        /*    font-size: 25px;*/
        /*    color:#155837;*/
        /*    font-weight: 500;*/
        /*    margin-bottom: 40px;*/
        /*    margin-left: 60px;*/
        /*}*/
        /*#pone input{*/
        /*    display:block;*/
        /*    margin-left: 100px;*/
        /*    height:30px;*/
        /*    width:280px;*/
		/*	border: none;*/
		/*	border-radius: 4px;*/
        /*    padding: 5px 5px;*/
        /*}*/
        /*#pone .button{*/
        /*    !* margin-left: 391px;*/
        /*    margin-top: -40px; *!*/
        /*    width:60px;*/
        /*    height:38px;*/
        /*    border:2px solid #155837;*/
        /*    background-color: #155837;*/
        /*    color:white;*/
        /*}*/
        /*#pone .button:hover{*/
        /*    border:2px solid #155837;*/
        /*    background-color: white;*/
        /*    color:#155837;*/
        /*    cursor: pointer;*/
        /*}*/
        /*#ptwo{*/
        /*    width:500px;*/
        /*    height:500px;*/
        /*    !* background-color: pink; *!*/
        /*    margin-top: 120px;*/
        /*    margin-left: 250px;*/
        /*}*/
        /*#ptwo input{*/
        /*    margin-bottom: 10px;*/
        /*    height:30px;*/
        /*    width:280px;*/
		/*	border:none;*/
		/*	border-radius: 4px;*/
        /*    padding: 5px 5px;*/
        /*    color:#ccc;*/
        /*    font-size: 20px;*/
        /*}*/
        /*#ptwo #button,#chaxun,#fan{*/
        /*    width:290px;*/
        /*    height:39px;*/
        /*    border:2px solid #155837;*/
        /*    background-color: #155837;*/
        /*    color:white;*/
        /*}*/
        /*#chaxun:hover,#ptwo #button:hover,#fan:hover{*/
        /*    border:2px solid #155837;*/
        /*    background-color: white;*/
        /*    color:#155837;*/
        /*    cursor: pointer;*/
        /*}*/
        /*.aaa{*/
        /*    padding: 3px 13px;*/
        /*    width:100px;*/
        /*    height:36px;*/
        /*    border:none;*/
        /*    margin-top: 66px;*/
        /*    margin-left: 5px;*/
        /*}*/
        /*#chaxun{*/
        /*    width:65px;height:40px;*/
        /*    margin-top:15px;*/
        /*    border-radius: 4px;*/
        /*    margin-left: 5px;*/
        /*}*/
        /*#bottom{*/
        /*    float:left;*/
        /*    width: 100%;*/
        /*    height:20px;*/
        /*    color:white;*/
        /*    background-color: #155837;*/
        /*    border:1px solid #155837;*/
        /*}*/
        /*select{*/
        /*    padding: 12px 12px;*/
        /*    border: none;*/
        /*    border-radius: 4px;*/
        /*}*/
        /*!* 这个是分页 *!*/
        /*.biao{*/
		/*    margin-left: 50%;*/
        /*}*/
        /*.biao a{*/
        /*    text-decoration:none;*/
        /*    color:black;*/
        /*    font-weight: 500;*/
        /*    font-size:20px;*/
        /*}*/
        /*.biao ul>li{*/
        /*    width:20px;*/
        /*    height:20px;*/
        /*    background-color: #155837;*/
        /*    border:3px solid #155837;*/
        /*    text-align: center;*/
        /*    border-radius: 3px;*/
        /*    line-height:20px;*/
        /*}*/
        /*.biao ul>li:hover{*/
        /*    background-color:white;*/
        /*    border:3px solid #155837;*/
        /*}*/
    </style>
</head>
<body>
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <%@include file="/front-end/views/common/manage_menu.jsp"%>>
    </div><!-- /.container-fluid -->
</nav>
<div id="box" style="background-color: #f6f6f6";>
        <div id="main">
            <div id="left">
                <ul>
                    <li class="current">基本资料</li>
                    <li>我的头像</li>
                    <li>密码管理</li>
                </ul>
            </div>
            <div id="right">
                <!-- 个人资料-->
                <div class="item" style="display:block;"  >
                    <div class="itemone" style="display:block;">
                        <form method="get" action="manage/usermanageServlet?action=rename">
                            <input type="hidden" name="action" value="rename">
                            <input type="hidden" name="id" value="${requestScope.user.id}">
                          <div class="form-group">
                            <label>手机号：</label>
                            <input type="text" name="phone" class="form-control" value="${requestScope.user.phone}" placeholder="手机号码">
                          </div>
                          <div class="form-group">
                            <label>昵称：</label>
                            <input type="text" name="username" value="${requestScope.user.username}" class="form-control" placeholder="姓名">
                          </div>
                            <input value="提交" type="submit">
                        </form>
                    </div>
                </div>

                <!-- 头像 -->
                <div class="item" display:none;>
                    <div>
                        <h3>原始头像：</h3>
                            <img src="${requestScope.user.head_path}" height="300" width="300"/>
                    </div>
                    <div class="form-group">
                        <h3>更改头像：</h3>
                        <form enctype="multipart/form-data" action="manage/usermanageServlet?action=resetHead" method="POST" >
                            <input type="file" name="head" id="exampleInputFile">
                            <input type="submit" value="提交" class="btn btn-primary">
                        </form>
                    </div>
                </div>
                <div class="item"  display:none;>
                    <!-- 密码管理 -->
                    <div class="setlist">
                   <form action="manage/usermanageServlet?action=editPassword" method="post" style="margin-left:150px;margin-top:100px;">
                       <input type="hidden" name="id" value="${requestScope.user.id}">
                               <p>旧密码：</p>
                               <input class="intputtext" style="width:200px;height:30px;"type="password" name="password" id="passwd" onkeyup="check(this.id)" nblur="check(this.id)"/>
                               <span id="passwd_msg" class="leftF error_msg"></span>

                           </br>

                               <p>新的密码：</p>
                               <input class="intputtext" type="password" style="width:200px;height:30px;" name="newpassword" id="npasswd" onkeyup="check(this.id)" onblur="check(this.id)"/>
                               <input type="hidden" id="pwdname" value="04183031"/>
                               * 密码由8-16位字符组成!
                               <span id="npasswd_msg" class="leftF error_msg"></span>

                           </br>
                       <p>确认新密码：</p>
                               <input class="intputtext" type="password" style="width:200px;height:30px;" name="renewpassword" id="npasswd1" onkeyup="check(this.id)" onblur="check(this.id)"/><font color="red">*</font>
                               <span id="npasswd1_msg" class="error_msg leftF"></span>

                           <br>

                               <input type="submit" class="intputbtnable" style="width:80px;height:40px;margin-top:20px;" onclick="resetPassport()" value="提交" />
                        </form>
                    </div>
                </div>
                </div>
            </div>
        </div>
    </div>
    </div>
<!--    验证密码-->
<script>
    function check(id){
		var ret = false;



        $("#passwd").blur(function () {
            var password = this.value;
            function ajaxRequest() {
                var xmlhttprequest = new XMLHttpRequest();
                var url = "manage/usermanageServlet?action=getPassword&password="+password;
                xmlhttprequest.open("GET",url,true);
                xmlhttprequest.onreadystatechange = function(){
                    if (xmlhttprequest.readyState == 4 && xmlhttprequest.status == 200) {
                        var data = JSON.parse(xmlhttprequest.responseText);
                        if(data){
                            $("#passwd_msg").html('密码正确！');
                        }else{
                            $("#passwd_msg").html('密码不正确！');
                        }

                    }
                }
                xmlhttprequest.send();
            }

        });

		if(id == "passwd"){
			if($("#passwd").val().length == 0){
				$("#passwd_msg").html('请输入旧密码！');
			}else{
				$("#passwd_msg").html("");
				ret =  true;
			}
		}else if(id == "npasswd"){
			if($("#npasswd").val().length == 0){
				$("#npasswd_msg").html('请输入新的密码！');
			}else{
				$("#npasswd_msg").html("");
				ret =  true;
			}
		}else if(id == "npasswd1"){
			if($("#npasswd1").val().length == 0){
				$("#npasswd1_msg").html('请确认新密码！');
			}else{
				var reg = /^[0-9|a-z|A-Z|@|.|_|#]{8,17}$/
				if($("#npasswd").val() != $("#npasswd1").val()){
					$("#npasswd1_msg").html('密码不一致！');
				}else if($("#npasswd").val() == $("#passwd").val()){
					$("#npasswd1_msg").html('新旧密码相同！');
				}else if($("#npasswd").val() =='123456'||$("#npasswd").val()== $("#pwdname").val()){
					$("#npasswd1_msg").html('密码过于简单，请重新设置。');
				}else if(!$("#npasswd").val().match(reg)){
					$("#npasswd1_msg").html('密码由8-16位字符组成!');
				}else{
					$("#npasswd1_msg").html("");
					ret =  true;
				}
			}
		}
		else if(id == "recode"){
			if($("#recode").val().length == 0){
				$("#recode_msg").html('请输入验证码！');
			}else{
				$("#recode_msg").html("");
				ret =  true;
			}
		}
		if(ret && $("#npasswd").val() !='123456'&&$("#npasswd").val()!= $("#pwdname").val() && $("#passwd").val().length > 0  && $("#npasswd").val().length > 0 && $("#npasswd1").val().length > 0 && $("#recode").val().length > 0){
			$("#resetPasswd_0").hide();
			$("#resetPasswd_1").show();
			$("#resetPasswd_2").hide();
		}else{
			$("#resetPasswd_0").show();
			$("#resetPasswd_1").hide();
			$("#resetPasswd_2").hide();
		}
		return ret;
	}
	function resetPassport(){
		if(check("passwd")){
			if(check("npasswd")){
				if(check("npasswd1")){
					if(check("recode")){
						$("#resetPasswd_0").hide();
						$("#resetPasswd_1").hide();
						$("#resetPasswd_2").show();
						$.ajax({
								url : '/settings/resetpassword',
								dataType:'json',
								data:{
										passwd : $("#passwd").val(),
										npasswd : $("#npasswd").val(),
										npasswd1 : $("#npasswd1").val(),
										recode : $("#recode").val()
									},
								type: 'POST',
								success : function(data){
									$("#resetPasswd_0").show();
									$("#resetPasswd_1").hide();
									$("#resetPasswd_2").hide();
									if(data.msg.indexOf('成功')!=-1){
										$("#savepwding").val('保存成功');
										alert(data.msg);
										top.location.href=top.location.href;
										//alert(data.msg+ '！请用新密码重新登录！');
										//top.location.href = 'http://passport2.chaoxing.com/logout.html?fid=1719';
									}else{
										alert(data.msg);
									}
									/*if(data.ret == 0){
										alert(data.msg+ '！请用新密码重新登录！');
										top.location.href = 'http://passport2.chaoxing.com/logout.html';
										//self.location.href=self.location.href;
									}else{
										alert(data.msg);
									}*/
								},
								error : function(e){
								}
							});
					}
				}
			}
		}
	}

</script>
    <script>
        // 总
        var left = document.getElementById('left');
        var lis = left.querySelectorAll('li');
        var items = document.querySelectorAll('.item');

        for(var i = 0;i<lis.length;i++){
            lis[i].setAttribute('index',i);
            lis[i].onclick = function (){
                for(var i =0;i<lis.length;i++){
                    lis[i].className = '';
                }
                this.className = 'current';
                var index = this.getAttribute('index');
                for(var i = 0;i<items.length;i++){
                    items[i].style.display = 'none';
                }
                items[index].style.display = 'block';
            }
        }


        // // 换行换色
        // var student = document.getElementById('student');
        // var trs = student.querySelector('tbody').querySelectorAll('tr');
        // console.log(trs);
        //     for(var i = 0;i<trs.length;i++){
        //         trs[i].onmouseover = function(){
        //             this.className = 'alt';
        //         }
        //         trs[i].onmouseout = function (){
        //             this.className = '';
        //         }
        //     }

        var teacher = document.getElementById('teacher');
        var trs = teacher.querySelector('tbody').querySelectorAll('tr');
        console.log(trs);
            for(var i = 0;i<trs.length;i++){
                trs[i].onmouseover = function(){
                    this.className = 'alt';
                }
                trs[i].onmouseout = function (){
                    this.className = '';
                }
            }

        var counselor = document.getElementById('counselor');
        var trs = counselor.querySelector('tbody').querySelectorAll('tr');
        console.log(trs);
            for(var i = 0;i<trs.length;i++){
                trs[i].onmouseover = function(){
                    this.className = 'alt';
                }
                trs[i].onmouseout = function (){
                    this.className = '';
                }
            }

        //one
        var item_one = document.querySelectorAll('.item')[0];
        var li = item_one.querySelectorAll('li');
        // console.log(li);

        var itemone = document.querySelectorAll('.itemone')
        for(var i = 0;i<li.length;i++){
            li[i].setAttribute('index',i);
            li[i].onclick = function (){
                for(var i =0;i<li.length;i++){
                    li[i].className = '';
                }
                this.className = 'currentt';
                var index = this.getAttribute('index');
                for(var i = 0;i<itemone.length;i++){
                   itemone[i].style.display = 'none';
                }
               itemone[index].style.display = 'block';
            }
        }

        // two
        var item_two = document.querySelectorAll('.item')[1];
        var lili = item_two.querySelectorAll('li');
        // console.log(lili);

        var itemtwo = document.querySelectorAll('.itemtwo')
        for(var i = 0;i<lili.length;i++){
            lili[i].setAttribute('index',i);
            lili[i].onclick = function (){
                for(var i =0;i<lili.length;i++){
                    lili[i].className = '';
                }
                this.className = 'currentt';
                var index = this.getAttribute('index');
                for(var i = 0;i<itemtwo.length;i++){
                   itemtwo[i].style.display = 'none';
                }
               itemtwo[index].style.display = 'block';
            }
        }

        // three
        var item_three = document.querySelectorAll('.item')[2];
        var lilili = item_three.querySelectorAll('li');
        // console.log(lilili);

        var itemthree = document.querySelectorAll('.itemthree')
        for(var i = 0;i<lilili.length;i++){
            lilili[i].setAttribute('index',i);
            lilili[i].onclick = function (){
                for(var i =0;i<lilili.length;i++){
                    lilili[i].className = '';
                }
                this.className = 'currentt';
                var index = this.getAttribute('index');
                for(var i = 0;i<itemthree.length;i++){
                   itemthree[i].style.display = 'none';
                }
               itemthree[index].style.display = 'block';
            }
        }
            // four
        var item_four = document.querySelectorAll('.item')[3];
        var lililili = item_four.querySelectorAll('li');
        // console.log(lili);

        var itemfour = document.querySelectorAll('.itemfour')
        for(var i = 0;i<lili.length;i++){
            lililili[i].setAttribute('index',i);
            lililili[i].onclick = function (){
                for(var i =0;i<lililili.length;i++){
                    lililili[i].className = '';
                }
                this.className = 'currentt';
                var index = this.getAttribute('index');
                for(var i = 0;i<itemfour.length;i++){
                   itemfour[i].style.display = 'none';
                }
               itemfour[index].style.display = 'block';
            }
        }
    </script>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
        $('#myModal').on('shown.bs.modal', function () {
          $('#myInput').focus()
        })
    </script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

</body>
</html>